Tīmekļa komponentes: padziļināts ieskats pielāgotajos elementos

Tīmekļa komponentes ir būtisks progress tīmekļa izstrādē, piedāvājot standartizētu veidu, kā izveidot atkārtoti lietojamas un iekapsulētas lietotāja saskarnes (UI) komponentes. Starp galvenajām tehnoloģijām, kas veido tīmekļa komponentes, pielāgotie elementi (Custom Elements) izceļas kā stūrakmens jaunu HTML tagu definēšanai ar pielāgotu uzvedību un renderēšanu. Šis visaptverošais ceļvedis iedziļinās pielāgoto elementu sarežģītībā, pētot to priekšrocības, ieviešanu un labākās prakses mūsdienīgu tīmekļa lietojumprogrammu veidošanai.

Kas ir tīmekļa komponentes?

Tīmekļa komponentes ir tīmekļa standartu kopums, kas ļauj izstrādātājiem izveidot atkārtoti lietojamus, iekapsulētus un savietojamus HTML elementus. Tās piedāvā modulāru pieeju tīmekļa izstrādei, ļaujot izveidot pielāgotas UI komponentes, kuras var viegli koplietot un atkārtoti izmantot dažādos projektos un ietvaros. Galvenās tehnoloģijas, kas ir tīmekļa komponenšu pamatā, ietver:

• Pielāgotie elementi (Custom Elements): Definē jaunus HTML tagus un to saistīto uzvedību.
• Shadow DOM: Nodrošina iekapsulēšanu, izveidojot atsevišķu DOM koku komponentei, pasargājot tās stilus un skriptus no globālā tvēruma.
• HTML veidnes (HTML Templates): Definē atkārtoti lietojamas HTML struktūras, kuras var instancēt un manipulēt, izmantojot JavaScript.

Izpratne par pielāgotajiem elementiem

Pielāgotie elementi ir tīmekļa komponenšu pamatā, ļaujot izstrādātājiem paplašināt HTML vārdnīcu ar saviem elementiem. Šie pielāgotie elementi darbojas kā standarta HTML elementi, bet tos var pielāgot konkrētām lietojumprogrammas vajadzībām, nodrošinot lielāku elastību un koda organizāciju.

Pielāgoto elementu definēšana

Lai definētu pielāgotu elementu, jums jāizmanto metode customElements.define(). Šī metode pieņem divus argumentus:

1. Elementa nosaukums: Virkne, kas apzīmē pielāgotā elementa nosaukumu. Nosaukumā jābūt defisei (-), lai izvairītos no konfliktiem ar standarta HTML elementiem. Piemēram, my-element ir derīgs nosaukums, bet myelement nav.
2. Elementa klase: JavaScript klase, kas paplašina HTMLElement un definē pielāgotā elementa uzvedību.

Šeit ir pamata piemērs:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Hello, World!';
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

Šajā piemērā mēs definējam pielāgotu elementu ar nosaukumu my-element. Klase MyElement paplašina HTMLElement un konstruktorā iestata elementa iekšējo HTML uz "Hello, World!".

Pielāgoto elementu dzīves cikla atsauces (Lifecycle Callbacks)

Pielāgotajiem elementiem ir vairāki dzīves cikla atsauces, kas ļauj izpildīt kodu dažādos elementa dzīves cikla posmos. Šīs atsauces nodrošina iespējas inicializēt elementu, reaģēt uz atribūtu izmaiņām un atbrīvot resursus, kad elements tiek noņemts no DOM.

• connectedCallback(): Tiek izsaukta, kad elements tiek ievietots DOM. Šī ir laba vieta, lai veiktu inicializācijas uzdevumus, piemēram, datu ielādi vai notikumu klausītāju pievienošanu.
• disconnectedCallback(): Tiek izsaukta, kad elements tiek noņemts no DOM. Šī ir laba vieta resursu tīrīšanai, piemēram, notikumu klausītāju noņemšanai vai atmiņas atbrīvošanai.
• attributeChangedCallback(name, oldValue, newValue): Tiek izsaukta, kad tiek mainīts elementa atribūts. Šī atsauce ļauj reaģēt uz atribūtu izmaiņām un atbilstoši atjaunināt elementa renderēšanu. Jums ir jānorāda, kuri atribūti jānovēro, izmantojot observedAttributes getteri.
• adoptedCallback(): Tiek izsaukta, kad elements tiek pārvietots uz jaunu dokumentu.

Šeit ir piemērs, kas demonstrē dzīves cikla atsauču izmantošanu:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `
Connected to the DOM!
`;
    console.log('Element connected');
  }

  disconnectedCallback() {
    console.log('Element disconnected');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

Šajā piemērā connectedCallback() reģistrē ziņojumu konsolē un iestata elementa iekšējo HTML, kad tas tiek pievienots DOM. disconnectedCallback() reģistrē ziņojumu, kad elements tiek atvienots. attributeChangedCallback() tiek izsaukta, kad mainās atribūts data-message, atbilstoši atjauninot elementa saturu. Getters observedAttributes norāda, ka mēs vēlamies novērot atribūta data-message izmaiņas.

Shadow DOM izmantošana iekapsulēšanai

Shadow DOM nodrošina tīmekļa komponenšu iekapsulēšanu, ļaujot jums izveidot atsevišķu DOM koku komponentei, kas ir izolēts no pārējās lapas. Tas nozīmē, ka stili un skripti, kas definēti Shadow DOM, neietekmēs pārējo lapu, un otrādi. Šī iekapsulēšana palīdz novērst konfliktus un nodrošina, ka jūsu komponentes darbojas paredzami.

Lai izmantotu Shadow DOM, jūs varat izsaukt metodi attachShadow() elementam. Šī metode pieņem opciju objektu, kas norāda Shadow DOM režīmu. mode var būt vai nu 'open', vai 'closed'. Ja režīms ir 'open', Shadow DOM var piekļūt no JavaScript, izmantojot elementa īpašību shadowRoot. Ja režīms ir 'closed', Shadow DOM nevar piekļūt no JavaScript.

Šeit ir piemērs, kas demonstrē Shadow DOM izmantošanu:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
This is inside the Shadow DOM.
    `;
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

Šajā piemērā mēs pievienojam Shadow DOM elementam ar mode: 'open'. Pēc tam mēs iestatām Shadow DOM iekšējo HTML, iekļaujot stilu, kas iestata rindkopu krāsu uz zilu, un rindkopas elementu ar tekstu. Stils, kas definēts Shadow DOM, attieksies tikai uz elementiem, kas atrodas Shadow DOM, un neietekmēs rindkopas ārpus Shadow DOM.

Pielāgoto elementu izmantošanas priekšrocības

Pielāgotie elementi piedāvā vairākas priekšrocības tīmekļa izstrādei:

• Atkārtota lietojamība: Pielāgotos elementus var atkārtoti izmantot dažādos projektos un ietvaros, samazinot koda dublēšanos un uzlabojot uzturēšanu.
• Iekapsulēšana: Shadow DOM nodrošina iekapsulēšanu, novēršot stilu un skriptu konfliktus un nodrošinot, ka komponentes darbojas paredzami.
• Savietojamība: Pielāgotie elementi ir balstīti uz tīmekļa standartiem, padarot tos savietojamus ar citām tīmekļa tehnoloģijām un ietvariem.
• Uzturēšana: Tīmekļa komponenšu modulārā daba atvieglo koda uzturēšanu un atjaunināšanu. Izmaiņas komponentē ir izolētas, samazinot risku sabojāt citas lietojumprogrammas daļas.
• Veiktspēja: Pielāgotie elementi var uzlabot veiktspēju, samazinot koda apjomu, kas jāparsē un jāizpilda. Tie arī ļauj efektīvāk renderēt un atjaunināt.

Pielāgoto elementu praktiski piemēri

Apskatīsim dažus praktiskus piemērus, kā pielāgotos elementus var izmantot, lai veidotu bieži sastopamas UI komponentes.

Vienkārša skaitītāja komponente

Šis piemērs demonstrē, kā izveidot vienkāršu skaitītāja komponenti, izmantojot pielāgotos elementus.

            class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        -
        ${this._count}
        +
      
    `;
  }
}

customElements.define('my-counter', Counter);
            

              
                Copy
              
            
          

Šis kods definē Counter klasi, kas paplašina HTMLElement. Konstruktors inicializē komponenti, pievieno Shadow DOM un iestata sākotnējo skaitli uz 0. Metode connectedCallback() pievieno notikumu klausītājus palielināšanas un samazināšanas pogām. Metodes increment() un decrement() atjaunina skaitli un izsauc metodi render(), lai atjauninātu komponentes renderēšanu. Metode render() iestata Shadow DOM iekšējo HTML, iekļaujot skaitītāja displeju un pogas.

Attēlu karuseļa komponente

Šis piemērs demonstrē, kā izveidot attēlu karuseļa komponenti, izmantojot pielāgotos elementus. Īsuma labad attēlu avoti ir vietturi un tos varētu dinamiski ielādēt no API, CMS vai lokālās krātuves. Arī stili ir samazināti līdz minimumam.

            class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  
  

  Previous
  Next
  
  
  `;
 }
}

customElements.define('image-carousel', ImageCarousel);
            

              
                Copy
              
            
          

Šis kods definē ImageCarousel klasi, kas paplašina HTMLElement. Konstruktors inicializē komponenti, pievieno Shadow DOM un iestata sākotnējo attēlu masīvu un pašreizējo indeksu. Metode connectedCallback() pievieno notikumu klausītājus iepriekšējās un nākamās pogām. Metodes nextImage() un prevImage() atjaunina pašreizējo indeksu un izsauc metodi render(), lai atjauninātu komponentes renderēšanu. Metode render() iestata Shadow DOM iekšējo HTML, iekļaujot pašreizējo attēlu un pogas.

Labākās prakses darbam ar pielāgotajiem elementiem

Šeit ir dažas labākās prakses, kuras jāievēro, strādājot ar pielāgotajiem elementiem:

• Izmantojiet aprakstošus elementu nosaukumus: Izvēlieties elementu nosaukumus, kas skaidri norāda komponentes mērķi.
• Izmantojiet Shadow DOM iekapsulēšanai: Shadow DOM palīdz novērst stilu un skriptu konfliktus un nodrošina, ka komponentes darbojas paredzami.
• Lietojiet dzīves cikla atsauces atbilstoši: Izmantojiet dzīves cikla atsauces, lai inicializētu elementu, reaģētu uz atribūtu izmaiņām un atbrīvotu resursus, kad elements tiek noņemts no DOM.
• Izmantojiet atribūtus konfigurācijai: Izmantojiet atribūtus, lai konfigurētu komponentes uzvedību un izskatu.
• Izmantojiet notikumus saziņai: Izmantojiet pielāgotus notikumus, lai sazinātos starp komponentēm.
• Nodrošiniet rezerves pieredzi: Apsveriet iespēju nodrošināt rezerves pieredzi pārlūkprogrammām, kas neatbalsta tīmekļa komponentes. To var izdarīt, izmantojot progresīvo uzlabošanu.
• Domājiet par internacionalizāciju (i18n) un lokalizāciju (l10n): Izstrādājot tīmekļa komponentes, apsveriet, kā tās tiks izmantotas dažādās valodās un reģionos. Izstrādājiet savas komponentes tā, lai tās būtu viegli tulkojamas un lokalizējamas. Piemēram, iznesiet visas teksta virknes ārpusē un nodrošiniet mehānismus tulkojumu dinamiskai ielādei. Pārliecinieties, ka jūsu datuma un laika formāti, valūtu simboli un citi reģionālie iestatījumi tiek apstrādāti pareizi.
• Apsveriet pieejamību (a11y): Tīmekļa komponentes jau no paša sākuma jāizstrādā, domājot par pieejamību. Izmantojiet ARIA atribūtus, ja nepieciešams, lai nodrošinātu semantisko informāciju palīgtehnoloģijām. Pārliecinieties, ka tastatūras navigācija ir pilnībā atbalstīta un ka krāsu kontrasts ir pietiekams lietotājiem ar redzes traucējumiem. Pārbaudiet savas komponentes ar ekrāna lasītājiem, lai pārbaudītu to pieejamību.

Pielāgotie elementi un ietvari

Pielāgotie elementi ir izstrādāti tā, lai būtu savietojami ar citām tīmekļa tehnoloģijām un ietvariem. Tos var izmantot kopā ar populāriem ietvariem, piemēram, React, Angular un Vue.js.

Pielāgoto elementu izmantošana React

Lai izmantotu pielāgotos elementus React, jūs varat tos vienkārši renderēt kā jebkuru citu HTML elementu. Tomēr jums, iespējams, būs jāizmanto ref, lai piekļūtu pamatā esošajam DOM elementam un tieši ar to mijiedarbotos.

            import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Access the custom element's API
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Custom event received:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;
            

              
                Copy
              
            
          

Šajā piemērā mēs izmantojam ref, lai piekļūtu pielāgotajam elementam my-element un pievienotu tam notikumu klausītāju. Tas ļauj mums klausīties pielāgotus notikumus, ko izsūta pielāgotais elements, un atbilstoši reaģēt.

Pielāgoto elementu izmantošana Angular

Lai izmantotu pielāgotos elementus Angular, jums ir jākonfigurē Angular, lai atpazītu pielāgoto elementu. To var izdarīt, pievienojot pielāgoto elementu masīvam schemas moduļa konfigurācijā.

            import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

            

              
                Copy
              
            
          

Kad pielāgotais elements ir reģistrēts, jūs to varat izmantot savās Angular veidnēs kā jebkuru citu HTML elementu.

Pielāgoto elementu izmantošana Vue.js

Vue.js arī dabiski atbalsta pielāgotos elementus. Jūs varat tos izmantot tieši savās veidnēs bez īpašas konfigurācijas.

            


            

              
                Copy
              
            
          

Vue automātiski atpazīs pielāgoto elementu un to pareizi renderēs.

Pieejamības apsvērumi

Veidojot pielāgotos elementus, ir ļoti svarīgi ņemt vērā pieejamību, lai nodrošinātu, ka jūsu komponentes var izmantot ikviens, ieskaitot cilvēkus ar invaliditāti. Šeit ir daži galvenie pieejamības apsvērumi:

• Semantiskais HTML: Ja iespējams, izmantojiet semantiskos HTML elementus, lai nodrošinātu jēgpilnu struktūru jūsu komponentēm.
• ARIA atribūti: Izmantojiet ARIA atribūtus, lai sniegtu papildu semantisko informāciju palīgtehnoloģijām, piemēram, ekrāna lasītājiem.
• Tastatūras navigācija: Nodrošiniet, lai jūsu komponentes varētu pārvietoties, izmantojot tastatūru. Tas ir īpaši svarīgi interaktīviem elementiem, piemēram, pogām un saitēm.
• Krāsu kontrasts: Nodrošiniet pietiekamu krāsu kontrastu starp tekstu un fona krāsām, lai teksts būtu salasāms cilvēkiem ar redzes traucējumiem.
• Fokusa pārvaldība: Pareizi pārvaldiet fokusu, lai nodrošinātu, ka lietotāji var viegli pārvietoties pa jūsu komponentēm.
• Testēšana ar palīgtehnoloģijām: Pārbaudiet savas komponentes ar palīgtehnoloģijām, piemēram, ekrāna lasītājiem, lai pārliecinātos, ka tās ir pieejamas.

Internacionalizācija un lokalizācija

Izstrādājot pielāgotos elementus globālai auditorijai, ir svarīgi apsvērt internacionalizāciju (i18n) un lokalizāciju (l10n). Šeit ir daži galvenie apsvērumi:

• Teksta virziens: Atbalstiet gan no kreisās uz labo (LTR), gan no labās uz kreiso (RTL) teksta virzienu.
• Datuma un laika formāti: Izmantojiet atbilstošus datuma un laika formātus dažādām lokalizācijām.
• Valūtas simboli: Izmantojiet atbilstošus valūtas simbolus dažādām lokalizācijām.
• Tulkošana: Nodrošiniet tulkojumus visām teksta virknēm jūsu komponentēs.
• Skaitļu formatēšana: Izmantojiet atbilstošu skaitļu formatēšanu dažādām lokalizācijām.

Noslēgums

Pielāgotie elementi ir spēcīgs rīks atkārtoti lietojamu un iekapsulētu UI komponenšu veidošanai. Tie piedāvā vairākas priekšrocības tīmekļa izstrādei, tostarp atkārtotu lietojamību, iekapsulēšanu, savietojamību, uzturēšanu un veiktspēju. Ievērojot šajā ceļvedī izklāstītās labākās prakses, jūs varat izmantot pielāgotos elementus, lai veidotu mūsdienīgas tīmekļa lietojumprogrammas, kas ir robustas, uzturamas un pieejamas globālai auditorijai. Tīmekļa standartiem turpinot attīstīties, tīmekļa komponentes, tostarp pielāgotie elementi, kļūs arvien svarīgākas modulāru un mērogojamu tīmekļa lietojumprogrammu izveidē.

Izmantojiet pielāgoto elementu spēku, lai veidotu tīmekļa nākotni, pa vienai komponentei. Atcerieties ņemt vērā pieejamību, internacionalizāciju un lokalizāciju, lai nodrošinātu, ka jūsu komponentes ir lietojamas ikvienam un visur.